<template>
  <b-container class="bv-example-row">
    <b-row>
      <b-col>
        <div id="Get" class="mainpage">
          <!-- 面包导航开始 -->
          <el-row style="margin: 15px">
            <div class="breadcrumb">
              <el-col>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item :to="{ path: '/' }"
                    >首页</el-breadcrumb-item
                  >
                  <el-breadcrumb-item :to="{ path: '/kegg' }"
                    >kegg接口</el-breadcrumb-item
                  >
                  <el-breadcrumb-item :to="{ path: '/get' }"
                    >get接口</el-breadcrumb-item
                  >
                </el-breadcrumb>
              </el-col>
            </div>
          </el-row>
          <!-- 面包导航结束 -->
          <el-row :gutter="10">
            <el-col style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
              <div class="grid-content bg-purple-light inpage">
                <el-row :gutter="10">
                  <el-col :span="6" :offset="2">
                    <div class="grid-content bg-purple-light">
                      <div class="block">
                        <el-row :gutter="10" style="margin-bottom: 20px">
                          <span
                            class="demonstration"
                            style="
                              font-family: 'Helvetica Neue', Helvetica,
                                'PingFang SC', 'Hiragino Sans GB',
                                'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
                              font-size: 18px;
                              font-color: blue;
                            "
                            >选择要下载的数据格式</span
                          >
                        </el-row>
                        <el-row :gutter="10" style="margin-bottom: 20px">
                          <el-cascader
                            v-model="value"
                            :options="options"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange"
                          ></el-cascader>
                        </el-row>
                        <el-row :gutter="5">
                          <el-col :span="12">
                            <el-button type="primary" @click="readValue"
                              >预览内容</el-button
                            >
                          </el-col>
                          <el-col :span="12">
                            <el-button type="success" @click="downLoadExcel"
                              >下载文件</el-button
                            >
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="6" :offset="6">
                    <div class="grid-content bg-purple">
                      <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        :disabled="canWrite"
                        v-model="textArea"
                      >
                      </el-input>
                    </div>
                  </el-col>
                </el-row>
                <el-row
                  :gutter="10"
                  style="margin: 20px"
                  v-show="textArea1Show"
                >
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 6 }"
                    placeholder="未显示结果"
                    v-model="textArea1"
                  >
                  </el-input>
                </el-row>
                <div
                  v-show="imgShow"
                  style="
                    margin: 20px;
                    padding: 20px;
                    overflow: scroll;
                    height: 500px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
                      0 0 6px rgba(0, 0, 0, 0.04);
                  "
                >
                  <div class="demo-image__lazy">
                    <el-image
                      v-for="url in urls"
                      :key="url"
                      :src="url"
                      lazy
                    ></el-image>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import kegg from "@/api/kegg";
export default {
  data() {
    return {
      textArea: "",
      textArea1: "",
      textArea1Show: false,
      imgShow: false,
      value: [],
      options: [],
      canWrite: false,
      fileName: "",
      urls: [],
      urlsText: [],
    };
  },
  created() {
    this.getKeggList();
  },
  methods: {
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.gettime = yy + "/" + mm + "/" + dd + "/" + hh + ":" + mf + ":" + ss;
      return _this.gettime;
    },
    handleChange(value) {
      if (value[1] == "image") {
        this.imgShow = true;
        this.textArea1Show = false;
      } else {
        this.imgShow = false;
        this.textArea1Show = true;
      }
    },
    getKeggList() {
      kegg.getGet().then((response) => {
        //读取信息进入数据格式列表
        this.options = response.data.data.optionslist;
      });
    },
    isBadResponse(response) {
      if (response.data.success == true) {
        return true;
      } else {
        return false;
      }
    },
    readValue() {
      length = this.value.length;
      let dataList = {};
      if (length < 2) {
        alert("请选择参数");
      } else {
        if (length == 2) {
          if (this.textArea != "") {
            dataList = {
              operation: this.value[0],
              arg2: this.value[1],
              textArea: this.textArea,
            };
            if (this.value[1] == "image") {
              kegg.viewGetData(dataList).then((response) => {
                if (this.isBadResponse(response)) {
                  //读取信息进入数据格式列表
                  this.urls = response.data.data.viewlist;
                } else {
                  alert(response.data.data.entry + " is unreadable");
                }
              });
            } else {
              kegg.viewGetData(dataList).then((response) => {
                if (this.isBadResponse(response)) {
                  //读取信息进入数据格式列表
                  this.textArea1 = response.data.data.viewlist;
                } else {
                  alert(response.data.data.entry + " is unreadable");
                }
              });
            }
          } else {
            alert("请输入查找物信息");
          }
        }
      }
    },
    downLoadExcel() {
      length = this.value.length;
      let dataList = {};
      if (length < 2) {
        alert("请选择参数");
      } else {
        if (length == 2) {
          if (this.textArea != "") {
            dataList = {
              operation: this.value[0],
              arg2: this.value[1],
              textArea: this.textArea,
            };
            if (this.value[1]) {
              kegg
                .downLoadGetData(dataList)
                .then((response) => {
                  if (response.data.type === "application/zip") {
                    console.log(response);
                    /* 兼容ie内核，360浏览器的兼容模式 */
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                      const blob = new Blob([response.data], {
                        type: "application/zip",
                      });
                      window.navigator.msSaveOrOpenBlob(blob, fileName);
                    } else {
                      /* 火狐谷歌的文件下载方式 */
                      const blob = new Blob([response.data], {
                        type: "application/zip",
                      });
                      const url = window.URL.createObjectURL(blob);
                      const link = document.createElement("a"); // 创建a标签
                      link.href = url;
                      link.download = this.getCurrentTime() + ".zip"; // 文件重命名，若无需重命名，将该行删去
                      link.click();
                      URL.revokeObjectURL(url); // 释放内存
                    }
                    Promise.resolve(response);
                  } else {
                    const reader = new FileReader();
                    reader.onload = function (event) {
                      const msg = JSON.parse(reader.result).data;
                      alert(message); // 将错误信息显示出来
                    };
                    reader.readAsText(response.data);
                  }
                })
                .catch((error) => alert(error.message));
            }
          } else {
            alert("请输入查找物信息");
          }
        }
      }
    },
  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #ffffff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.mainpage {
  margin-bottom: 0px;
  min-height: 800px;
}

.inpage {
  margin-bottom: 0px;
  min-height: 800px;
  padding-top: 50px;
}
</style>